<template>
  <el-card shadow="never" class="portal-eChart-box">
    <div class="eChart-box-body">
      <el-tabs @tab-click="handleClick" v-model="activeName" style="padding-left: 20px">
        <el-tab-pane label="区域数据" name="regionChart">
          <div ref="regionChart" id="regionChart" class="chart" style="height: 320px"></div>
        </el-tab-pane>
        <el-tab-pane label="新增数据" name="insteadChart">
          <div ref="insteadChart" id="insteadChart" style="height: 320px"></div>
        </el-tab-pane>
      </el-tabs>

      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img" />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
import { getCampusRegion, getCampusSign } from '@/api/home'
export default {
  mixins: [resize],
  props: {
    title: { type: String, default: '' },
    cuKey: { type: String, default: '' },
    dataType: { type: String, default: 'static' },
    propsApi: { type: String, default: '' },
    option: { type: Object, default: () => {} }
  },
  data() {
    return {
      chart: null,
      currOption: {},
      isEmpty: true,
      activeName: 'regionChart'
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    /*if (this.dataType === 'dynamic') {
      if (!this.propsApi) return
      previewDataInterface(this.propsApi).then(res => {})
    }*/
  },
  watch: {
    option: {
      handler(val) {
        this.currOption = val
        this.resetChart()
      },
      deep: true
    },

    dataType(val) {
      if (val !== 'dynamic') {
        this.currOption = this.option
        this.resetChart()
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      this.getData()
    },
    timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done')
      })
    },
    getData() {
      if (this.activeName === 'regionChart') {
        getCampusRegion().then(res => {
          this.currOption = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '1%', // 左边距
              right: '1%', // 右边距
              top: '10%', // 顶部边距
              bottom: '8%', // 底部边距
              containLabel: true // 确保坐标轴的标签被包含在 grid 中
            },
            color: ['#1aacfd', '#46eeda', '#fa89a0', 'rgb(175, 134, 255)', 'rgb(243, 189, 100)'],
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {
                  // 保存为图片
                  show: true,
                  title: '下载',
                  type: 'png',
                  lang: ['点击下载']
                },
                dataView: {
                  // 数据视图工具，可以取消显示
                  show: false
                },
                magicType: {
                  // 动态类型切换，可以取消显示
                  show: false
                },
                restore: {
                  // 配置项还原
                  show: false
                }
              }
            },
            legend: {
              data: ['全部校区', '正常校区', '筹备校区', '暂停校区', '待续费校区'], // 图例名称
              orient: 'horizontal', // 设置图例布局方向为水平
              top: 'top', // 设置图例在顶部
              left: 'center' // 设置图例在水平方向上居中
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: res.data.province,
                axisLine: {
                  color: '#48b',
                  width: 2,
                  type: 'solid',
                  axisLine: {
                    lineStyle: {
                      color: '#b4b4b4' // 设置X轴颜色
                    }
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(数量/地区)', // 在Y轴顶部显示单位
                nameLocation: 'end', // 指定单位显示的位置，'end'表示在Y轴的末端，即顶部
                nameTextStyle: {
                  // 可以设置单位的样式
                  color: '#b4b4b4',
                  fontSize: 14
                },
                splitLine: {
                  lineStyle: {
                    type: 'dashed', // 设置网格线为虚线
                    color: '#f3f3f3' // 设置网格线的颜色
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#b4b4b4' // 设置X轴颜色
                  }
                }
              }
            ],
            series: [
              {
                name: '全部校区',
                type: 'bar',
                data: res.data.all,
                markPoint: {
                  data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                }
                // itemStyle: {
                //   normal: {
                //     color: function(params) {
                //       var colorList = ['#1aacfd', '#71eae0']
                //       return colorList[params.dataIndex % colorList.length] // 循环使用颜色数组
                //     }
                //   }
                // }
              },
              {
                name: '正常校区',
                type: 'line',
                data: res.data.normal
                // itemStyle: {
                //   normal: {
                //     color: function(params) {
                //       var colorList = ['#1aacfd', '#71eae0','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                //       return colorList[params.dataIndex % (colorList.length + 1)] // 循环使用颜色数组
                //     }
                //   }
                // }
              },
              {
                name: '筹备校区',
                type: 'bar',
                data: res.data.preparation,
                markPoint: {
                  data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                }
                // itemStyle: {
                //   normal: {
                //     color: function(params) {
                //       var colorList = ['#1aacfd', '#71eae0','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                //       return colorList[params.dataIndex % (colorList.length + 2)] // 循环使用颜色数组
                //     }
                //   }
                // }
              },
              {
                name: '暂停校区',
                type: 'bar',
                data: res.data.suspended,
                markPoint: {
                  data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                }
                // itemStyle: {
                //   normal: {
                //     color: function(params) {
                //       var colorList = ['#1aacfd', '#71eae0','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                //       return colorList[params.dataIndex % (colorList.length + 3)] // 循环使用颜色数组
                //     }
                //   }
                // }
              },
              {
                name: '待续费校区',
                type: 'bar',
                data: res.data.expires,
                markPoint: {
                  data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                }
                // itemStyle: {
                //   normal: {
                //     color: function(params) {
                //       var colorList = ['#1aacfd', '#71eae0','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                //       return colorList[params.dataIndex % (colorList.length + 4)] // 循环使用颜色数组
                //     }
                //   }
                // }
              }
            ]
          }
          this.timeout(100).then(value => {
            this.initChart()
          })
        })
      } else {
        getCampusSign().then(res => {
          this.currOption = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '1%', // 左边距
              right: '1%', // 右边距
              top: '10%', // 顶部边距
              bottom: '8%', // 底部边距
              containLabel: true // 确保坐标轴的标签被包含在 grid 中
            },
            color: ['#1aacfd'],
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {
                  // 保存为图片
                  show: true,
                  title: '下载',
                  type: 'png',
                  lang: ['点击下载']
                },
                dataView: {
                  // 数据视图工具，可以取消显示
                  show: false
                },
                magicType: {
                  // 动态类型切换，可以取消显示
                  show: false
                },
                restore: {
                  // 配置项还原
                  show: false
                }
              }
            },
            legend: {
              data: ['全部校区'], // 图例名称
              orient: 'horizontal', // 设置图例布局方向为水平
              top: 'top', // 设置图例在顶部
              left: 'center' // 设置图例在水平方向上居中
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: res.data.province,
                axisLine: {
                  color: '#48b',
                  width: 2,
                  type: 'solid',
                  axisLine: {
                    lineStyle: {
                      color: '#b4b4b4' // 设置X轴颜色
                    }
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(数量/地区)', // 在Y轴顶部显示单位
                nameLocation: 'end', // 指定单位显示的位置，'end'表示在Y轴的末端，即顶部
                nameTextStyle: {
                  // 可以设置单位的样式
                  color: '#b4b4b4',
                  fontSize: 14
                },
                splitLine: {
                  lineStyle: {
                    type: 'dashed', // 设置网格线为虚线
                    color: '#f3f3f3' // 设置网格线的颜色
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#b4b4b4' // 设置X轴颜色
                  }
                }
              }
            ],
            series: [
              {
                name: '全部校区',
                type: 'bar',
                data: res.data.all,
                markPoint: {
                  data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
                }
              }
            ]
          }
          this.timeout(100).then(value => {
            this.initChart(this.$refs.insteadChart)
          })
        })
      }
    },
    initChart(refs) {
      let ref = refs ? refs : this.$refs.regionChart
      
      if (!ref) {
        console.warn('Chart container element not found')
        return
      }
      
      this.chart = echarts.init(ref)
      this.chart.setOption(this.currOption, true)
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      }, 50)
    },
    resetChart() {
      this.isEmpty = JSON.stringify(this.currOption) === '{}'
      this.chart && this.chart.dispose()
      this.chart = null
      if (!this.isEmpty) this.initChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) return
    this.chart.dispose()
    this.chart = null
  }
}
</script>
